<template>
  <div class="app-container msg-container">
    <div class="msg-title">
      <i class="el-icon-message-solid"></i>
      <span>消息中心</span>
    </div>
    <div class="msg-btn">
      <div>
        <el-button
            :class="activeTab === 'task' ? 'msg-check' : ''"
            type="primary"
            plain
            @click="handleSwitch('task')"
        >消息通知</el-button
        >
      </div>
      <div v-show="activeTab === 'msg'">
        <el-button
            type="primary"
            plain
            :disabled="data.length > 0 ? false : true"
            @click="handleWatchAll"
        >全部标记为已查看</el-button
        >
      </div>
    </div>
    <avue-crud
        ref="crud"
        v-model="form"
        class="crud-table"
        :data="data"
        :option="tableOption"
        :page.sync="page"
        :search.sync="searchForm"
        :table-loading="listLoading"
        :header-cell-class-name="() => 'crud-table-head'"
        :cell-class-name="() => 'crud-cell'"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="getList"
    >
      <template #menu="{ row, size }">
        <el-button
            v-show="activeTab === 'task'"
            type="text"
            :size="size"
            @click="handleToTask(row)"
        >去查看</el-button
        >
        <el-button
            v-show="activeTab === 'msg' && row.messageStatus === '1'"
            type="text"
            style="color: #333"
            :size="size"
        >已查看</el-button
        >
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { getMsgList, setMsgReadAll } from '@/api/msg.js'
export default {
  data() {
    return {
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      listLoading: false,
      data: [],
      form: {},
      activeTab: 'task',
      msgCount: this.$store.state.msg.sysCount
    }
  },
  computed: {
    tableOption() {
      return {
        border: true,
        addBtn: false,
        delBtn: false,
        editBtn: false,
        searchShowBtn: false,
        refreshBtn: false,
        align: 'center',
        viewBtn: false,
        card: false,
        columnBtn: false,
        index: true,
        indexLabel: '序号',
        indexWidth: 90,
        menu:false,
        header:false,
        column: [
          {
            label: '消息内容',
            prop: 'messageContent'
          },
          {
            label: '时间',
            width: 300,
            prop: 'createTime'
          }
        ]
      }
    }
  },
  watch: {
    $route: {
      handler(val) {
        if (val.query.type === '2') {
          this.activeTab = 'msg'
        } else {
          this.activeTab = 'task'
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getList() {
      this.listLoading = true
      getMsgList({
        pageNumber: this.page.currentPage,
        pageSize: this.page.pageSize,
        ...this.searchForm,
        platformCode: 'SUPERVISE',
        messageType: this.activeTab === 'task' ? '1' : '2',
        messageStatus:0
      })
          .then(res => {
            this.data = res.result.records
            this.page.total = res.result.total
          })
          .catch(() => {})
          .finally(() => {
            this.listLoading = false
          })
    },
    searchChange(form, done) {
      this.page.currentPage = 1
      this.getList()
      done && done()
    },
    // 切换tab
    handleSwitch(value) {
      this.activeTab = value
      this.$router.push({
        path: `/sys/message?type=${value === 'task' ? '1' : '2'}`
      })
      this.searchChange()
    },
    // 去查看
    handleToWacth(value) {
      this.$store.dispatch('msg/checkSys', {
        data: value,
        callback: path => {
          if (path) {
            if (path == '/warning/list') {
              this.$router.push(`/warning/detail?id=${value.businessId}`);
            } else {
              this.$router.push(path);
            }
          }
        }
      })
    },
    // 去处理
    handleToTask(value) {
      this.$store.dispatch('msg/checkTask', {
        data: value,
        callback: path => {
          if (path) {
            if (path == '/warning/list') {
              this.$router.push(`/warning/detail?id=${value.businessId}`);
            } else {
              this.$router.push(path);
            }
          }
        }
      })
    },
    handleWatchAll() {
      setMsgReadAll().then(res => {
        this.searchChange()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.msg-container {
  padding: 20px !important;
  .msg-title {
    color: var(--theme);
    font-size: 20px;
    border-bottom: 1px solid var(--theme);
    padding: 0 0 15px 15px;
    i {
      width: 20px;
      height: 20px;
      margin-right: 12px;
    }
  }
  .msg-btn {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    .el-button {
      margin-left: 15px;
    }
    .msg-check {
      background: var(--theme);
      border-color: var(--theme);
      color: #fff;
    }
  }
}
</style>
